<template>
    <!-- 添加角色表单对话框 -->
    <el-dialog v-model="dialogVisible" :title="title" width="30%" @close="handleClose">
        <el-form label-width="120px" ref="formRef" :model="form" :rules="rules">
            <el-form-item label="所属分类" prop="parentId">
                <!-- <el-input v-model="form.parentId" /> -->
                <el-tree-select v-model="form.parentId" :data="treeData" :props="defaultProps" />
            </el-form-item>
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="图标" prop="imageUrl">
                <el-upload class="avatar-uploader" action="/api/admin/system/fileUpload" @success="handleSuccess"
                    :headers="headers" :show-file-list="false">
                    <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="使用状态" prop="status">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="正常"
                    inactive-text="停用" />
            </el-form-item>
            <el-form-item label="排序" prop="orderNum">
                <el-input v-model="form.orderNum" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="handleSubmit()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import type { Category } from '../impl.ts';
import { findAllNodesApi } from '@/api/category'
import { useUserStore } from '@/stores/index.ts'
const headers = {
    "X-Token": useUserStore().token     // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
}

// 控制对话是否展示的变量
const dialogVisible = ref(false)
const formRef = ref()
const treeData = ref([])
const emit = defineEmits(['submit'])
const props = defineProps({
    title: String,
})
const defaultForm = {
    id: null,
    name: "",
    imageUrl: "",
    parentId: "",
    status: null,
    orderNum: null,
}
const defaultProps = {
    children: 'children',
    label: 'name',
    value: 'id',
}

const form = ref<Category>(defaultForm)
// 定义提交表单数据模型

const rules = ref({
    name: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },

    ],
    imageUrl: [
        { required: true, message: '请上传图标', trigger: 'blur' },
    ],

    status: [
        { required: true, message: '请输入使用状态', trigger: 'blur' },
    ],
    orderNum: [
        { required: true, message: '请输入排序', trigger: 'blur' },
    ],


})

const handleSuccess = (res: any) => {

    form.value.imageUrl = res.data
}

const handleClose = () => {
    form.value = defaultForm

}

//进入添加
const show = (data: Category) => {
    dialogVisible.value = true
    findAllNodesApi().then(res => {
        treeData.value = res.data
    })
    if (data && data.id) {
        form.value = { ...data } as Category
    } else {
        form.value = defaultForm
    }
}

const handleSubmit = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            dialogVisible.value = false
            emit('submit', form.value)
        }
    })

}



defineExpose({
    show
})
</script>
<style scoped>
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>